<script lang="ts" setup>
import { useEditor } from '@/store/useEditor.ts'
import { type ComponentPublicInstance, nextTick, ref } from 'vue'
import eventBus from '@/utils/eventBus.ts'
import { Close } from '@element-plus/icons-vue';
import { ElMessageBox ,ElMessage} from 'element-plus'
import draggable from "vuedraggable"

const store = useEditor()
const centerRef = ref<HTMLElement | null>(null)
const elementRefs = ref<(Element | ComponentPublicInstance | null)[]>([])

const scrollToBottom = () => {
  nextTick(() => {
    const container = centerRef.value // 获取容器的dom元素
    if (container) {
      window.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth'
      })
    }
  })
}

const scrollToCenter = (index: number) => {
  nextTick(() => {
    const currentElement = elementRefs.value[index]
    if (currentElement instanceof HTMLElement) {
      currentElement.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      })
    }
  })
}

eventBus.on('scrollBottom', scrollToBottom)
eventBus.on('scrollCenter', scrollToCenter)

const clickHandle = (index: number) => {
  if (store.currentComponentIndex === index) {
    store.setCurrentComponentIndex(-1)
  } else {
    store.setCurrentComponentIndex(index)
    eventBus.emit('scrollCenter',index)
  }
}

const removeCom = (index: number)=>{
  ElMessageBox.confirm('确定删除该组件吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      store.deleteComponent(index);
      store.setCurrentComponentIndex(-1);
      ElMessage.success('删除成功');
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
}
</script>

<template>
  <div ref="centerRef" class="center-container">
    <div
      v-for="(item, index) in store.editorComps"
      :key="index"
      :ref="(el)=>(elementRefs.push(el))"
      :class="{
        active:store.currentComponentIndex === index,
      }"
      class="content mb-10 relative"
      @click="clickHandle(index)"
    >
      <component :is="item.type" :serialNum="1" :status="item.status" />
      <!-- 删除按钮 -->
      <div class="absolute delete-btn" v-show="store.currentComponentIndex === index">
        <el-button
          type="danger"
          class="ml-10"
          size="small"
          :icon="Close"
          circle
          @click.stop="removeCom(index)"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.center-container {
  width: 50%;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  margin: 70px auto;
  padding: 20px;
  background: var(--white);
  position: relative;

  .content {
    cursor: pointer;
    padding: 10px;
    background-color: var(--white);
    border-radius: var(--border-radius-sm);

    &:hover {
      transform: scale(1.01);
      transition: 0.5s;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  }
}

.active {
  transform: scale(1.01);
  transition: 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.delete-btn {
  right: -5px;
  top: -10px;
}
</style>
